<script setup lang="ts">
import { Theme } from "@/keys";
import { inject, onMounted } from "vue";
interface Props {
  id: number;
  title: string;
  price: number;
  inStock: boolean;
  imageUrl: string;
}
defineProps<Props>();
const bus = inject(Theme);
const minibus = inject<string>("iamKey");
onMounted(() => {
  // console.log(bus, minibus);
});
</script>
<template>
  <div class="prodectItem">
    <img :src="imageUrl" class="img" />
    <p class="title">{{ title }}</p>
    <p class="price">价格：￥{{ price.toFixed(2) }}</p>
    <p class="inStock">库存：{{ inStock ? "有货" : "缺货" }}</p>
  </div>
</template>
<style scoped>
.prodectItem {
  /* background-color: blue; */
  padding: 18px;
  border-radius: 15px;
  box-shadow: 0px 0px 24px hsl(0deg, 0%, 0%, 0.1);
}

.prodectItem img {
  height: 300px;
}

.prodectItem .price {
  color: hsl(0deg, 100%, 66%);
  font-weight: bold;
}
</style>
